
<script setup lang='ts'>
import { getBannerList, getNavList, getProList } from '../../api/home'
import { onMounted, reactive, ref, onDeactivated,onActivated } from 'vue'
import type { Ref } from 'vue'
import type { iBanner, iNav, iPro } from './home'

import ProListVue from '../../components/ProList.vue'


const bannerList: Ref<iBanner[]> = ref([])
const navList: Ref<iNav[]> = ref(getNavList())

const proList: Ref<iPro[]> = ref([])

onMounted(() => {
  getBannerList().then(res => {
    bannerList.value = res.data.data
  })

  getProList({ count: 1 }).then(res => {
    proList.value = res.data.data
  })
})


// --------------  上拉加载更多  -----------------
const loading: Ref<boolean> = ref(false) // 是否正在加载
const finished: Ref<boolean> = ref(false) // 是否还有更多数据

const count: Ref<number> = ref(2) // 当前页码
// 触发上拉加载的函数
function onLoad() {

  loading.value = true

  getProList({ count: count.value }).then(res => {

    loading.value = false
    if (res.data.data.length <= 0) {
      // 没有更多数据了
      finished.value = true
    } else {
      // 还有数据
      count.value++
      proList.value = [...proList.value, ...res.data.data]
    }

  })
}



// ------------------- 回到顶部 ----------------
const top: Ref<number> = ref(0) // 当前滚动的距离
function scrollTop(event: any) {
  // console.dir 可以输出 dom 的所有属性
  // console.log(event.target.scrollTop);
  top.value = event.target.scrollTop
}

// 点击回到顶部的事件
const contentRef: Ref<any> = ref()
// 在 setup 中不能使用 this 所以我们无法直接使用 this.$refs
// 我们可以先通过 ref 函数来定义一个变量，将 DOM 元素的 ref 
// 值设置为和变量名一样的值   在需要的时候直接通过 变量名.value 获取
// 千万记住设置 ref 的时候不要加 : 冒号
function goTop() {
  // top.value = 0

  // console.log(contentRef);
  contentRef.value.scrollTop = 0
  top.value = 0

}


// ------------------ 上拉加载更多 --------------------
const isLoading = ref(false) // 是否处于加载状态
// 上拉加载的函数
function onRefresh(){
  // 标记为加载状态
  isLoading.value = true

  // 获取最近的商品数据列表
  getProList({count: 1}).then(res => {
    proList.value = res.data.data

    isLoading.value = false

    // 恢复上拉加载更多的属性
    loading.value = false
    finished.value = false
    count.value = 2
  })
}



// --------------- 处理页面滚动位置
onDeactivated(()=>{
  // 离开组件时被调用
  console.log('离开了组件');
  
  // 本地记录当前滚动距离
  localStorage.setItem('top', String(top.value))
})

onActivated(()=>{
  // 组件进入的时候被调用

  // 获取我们离开时的位置
  top.value = Number(localStorage.getItem('top') || 0)

  // console.log(top.value);
  // 将滚动距离设置到页面中
  contentRef.value.scrollTop =top.value

  // 清除保存的滚动距离
  localStorage.removeItem('top')
})

</script>


<template>
  <main class='box'>
    <header class='header'>
      头部-首页
    </header>

    <!-- 这里的 ref 不能加 : -->
    <div class='content' ref="contentRef" @scroll="scrollTop">


    
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#f66">
        <van-swipe-item v-for="item in bannerList" :key="item.bannerid">
          <img class="banner" :src="item.img" alt="" />
        </van-swipe-item>
      </van-swipe>

        <!-- 上拉加载更多的组件 -->
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >


      <van-grid column-num='5' :border='false'>
        <van-grid-item v-for="item in navList" :key="item.navid" :icon="item.imgurl" :text="item.title" />
      </van-grid>


      <!-- 使用 vant 组件实现 proList -->
      <!-- <van-card
          v-for="item in proList" 
          :key="item.proid"
          :price="item.originprice"
          :title="item.proname"
          :thumb="item.img1"
        /> -->
      <!-- 
        什么时候我们需要自定义组件，什么组件是好的组件
        因为系统组件无法满足我们需求的时候，可以使用自定义组件，一处内容会被多次
        使用的时候，可以封装成组件
        我觉得一个组件的复用性强，入参和出参也是一个好组件的特点，还有插槽
       -->

      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <ProListVue :prolist='proList' />
      </van-list>

</van-pull-refresh>



      <div @click="goTop" v-show="top > 280" class="back-top">
        <van-icon size='30' name="back-top" />
      </div>

    </div>
  </main>
</template>
<style scoped lang="scss">
.my-swipe {
  width: 100%;
  height: 200px;

  .banner {
    width: 100%;
    height: 100%;
  }
}

.back-top {
  position: fixed;
  right: 10px;
  bottom: 120px;
  border: 1px solid #f66;
  padding: 4px;
  border-radius: 50%;
  background-color: white;
}
</style>